import { useEffect, useState } from "react";
import { Button, Radio, Input, Modal, Pagination } from "antd";
import { hideUserGet } from "@/assets/js/networkRequest/method";
import { useHistory } from "react-router-dom";
import Table from "./table";
import Upload from "./upload";

// 保存列表数据
let initFormData: any = [];
let record_id: number = 0;
// 状态值
// let status: string = "";
// 电话/备注名
let condition: string = "";
// 当前页
let current: number = 1;
// 总页
let page_total: number = 0;
// 每页条数
let limit: number = 10;
// 总条数
let customer_total: number = 0;

const HideUser = () => {
  const history: any = useHistory();
  const [, setRender] = useState(0);
  const [visible, setVisible] = useState(false);
  const [loding, setLoding] = useState(true);
  // 状态值
  let [status, setStatus] = useState("");

  // 根据条件请求接口数据
  const requestFormData = async () => {
    setLoding(true);
    let res: any = await hideUserGet({ record_id, status, condition, current, limit });
    setLoding(false);
    if (res.code === 200) {
      initFormData = res.data.customer_info;
      page_total = res.data.page_total;
      customer_total = res.data.customer_total;
      initFormData.map((item: any, index: number) => {
        item.key = index;
        item.flag = false;
      });
      setRender(Math.random() + 1);
    }
  };

  // 筛选类型记录
  const onTypeChange = (e: any) => {
    status = e.target.value;
    setStatus(status);
    requestFormData();
  };

  // 筛选电话/备注名记录
  const PhoneOrRemockChange = (e: any) => {
    condition = e;
    requestFormData();
  };

  useEffect(() => {
    if (history.location.query) {
      status = history.location.query.status;
      setStatus(history.location.query.status);
    }

    requestFormData();
  }, []);

  return (
    <div className="h-full py-0 px-16 pb-10 flex flex-col">
      <div className="flex items-center justify-between pr-24">
        <div>
          <span className="mr-4">筛选：</span>
          <Radio.Group onChange={onTypeChange} value={status}>
            <Radio value={""}>全部</Radio>
            <Radio value={"NEW"}>待分配</Radio>
            <Radio value={"WAIT"}>待添加</Radio>
            <Radio value={"ADD"}>待通过</Radio>
            <Radio value={"PASS"}>已添加</Radio>
          </Radio.Group>
        </div>
        <div>
          <Button
            type="primary"
            icon={<i className="iconfont icon-tianjia1 mr-6" />}
            ghost
            className="topBtn mr-24"
            onClick={() => {
              setVisible(true);
            }}>
            导入客户
          </Button>
          <Button
            type="primary"
            icon={<i className="iconfont icon-jilu mr-6" />}
            ghost
            className="topBtn mr-24"
            onClick={() => {
              window.globalState.muState("history", {
                type: "push",
                pathname: "/batch_add_user/record",
              });
            }}>
            导入记录
          </Button>
          <Button
            type="primary"
            icon={<i className="iconfont icon-shezhi1 mr-6" />}
            ghost
            className="topBtn">
            设置
          </Button>
        </div>
      </div>

      <div className="flex flex-col flex-1 ">
        <div className="flex items-center justify-between px-24 mt-16 py-16 bg-white">
          <div className="font-semibold">共{customer_total}个客户</div>
          <div>
            <Input.Search
              allowClear
              style={{ width: "100%" }}
              defaultValue=""
              placeholder="请搜索电话/备注名"
              onSearch={PhoneOrRemockChange}
            />
          </div>
        </div>
        <div className="flex-1 overscroll-y-auto scrollY text-13">
          <Table
            initFormData={initFormData}
            requestFormData={requestFormData}
            loding={loding}
          />
        </div>
      </div>
      {page_total <= 1 ? null : (
        <Pagination
          className="text-right m-14"
          current={current}
          total={customer_total}
          pageSize={limit}
          pageSizeOptions={["5", "10", "20", "50", "100"]}
          onChange={(page: any, pageSize: any) => {
            current = page;
            limit = pageSize;
            requestFormData();
          }}
          onShowSizeChange={(page, pageSize) => {
            current = page;
            limit = pageSize;
          }}
        />
      )}

      <Modal
        closable={false}
        maskClosable={false}
        visible={visible}
        width={495}
        footer={null}
        onCancel={() => {
          setVisible(false);
        }}>
        <Upload visible={visible} setVisible={setVisible} />
      </Modal>
    </div>
  );
};

export default HideUser;
